<template>
    <div class="root-index">
        <img class="banner"
             src="../assets/banner.png" />
        <ul class="navs">
            <li @click="show=true">
                新增安全检查
            </li>
            <li>
                <router-link to="/safeView2">
                    安全检查台账
                </router-link>
            </li>
            <li>
                <router-link to="/safeView3">
                    需要执行的检查
                </router-link>
            </li>
        </ul>
        <tabbar v-transfer-dom
                class="btn-nav"
                @on-index-change="onIndexChange">
            <tabbar-item link="/safeCheck"
                         :selected="selectedIndex === 0">
                <img slot="icon"
                     src="../assets/nav-icon1.png">
                <img slot="icon-active"
                     src="../assets/nav-icon11.png">
                <span slot="label">安全检查</span>
            </tabbar-item>
            <tabbar-item link="/hideManager"
                         :selected="selectedIndex === 1">
                <img slot="icon"
                     src="../assets/nav-icon2.png">
                <img slot="icon-active"
                     src="../assets/nav-icon21.png">
                <span slot="label">隐患管理</span>
            </tabbar-item>
            <tabbar-item link="/Index/userinfo">
                <img slot="icon"
                     src="../assets/nav-icon3.png">
                <img slot="icon-active"
                     src="../assets/nav-icon31.png">
                <span slot="label">我的</span>
            </tabbar-item>
        </tabbar>
        <actionsheet v-model="show"
                     :menus="menu7"
                     @on-click-menu="click">
        </actionsheet>
    </div>
</template>
<script>
import { Tabbar, TabbarItem, TransferDom, Actionsheet } from 'vux'

export default {
    name: 'rootIndex',
    data () {
        return {
            selectedIndex: '',
            show: false,
            menu7: {}
        }
    },
    components: {
        tabbar: Tabbar,
        'tabbar-item': TabbarItem,
        Actionsheet
    },
    directives: {
        TransferDom
    },
    created () {
        this.listArr()
    },
    methods: {
        onIndexChange (newIndex) {
            this.selectedIndex = newIndex
        },
        listArr () {
            let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
            let parmas = {
                allowPaging: 'true',
                business: 'GetCheckWorkTypeMenu',
                pageIndex: 0,
                pageSize: 20000,
                tokenId: 'A3944C2D655B11D684296E71CB81C9BD',
                userId: userInfo.userid
            }
            this.$axiosAjax.getConfigJson(parmas).then((res) => {
                if (res.status == 200) {
                    this.menu7 = res.data.data
                }
            })
        },
        click (key, item) {
            this.$store.state.name1 = []
            if (item == '日常检查') {
                this.$store.state.selectidlist1 = []
                this.$store.state.selectidlist2 = []
                this.$store.state.selectidlist3 = []
                this.$store.state.checkcompany = ''
                this.$store.state.checktime = ''
                this.$store.state.HiddenDangers = []
                this.$router.push({ path: '/testing' })
                localStorage.newadd = 'add'
            } else {
                this.$router.push({ path: '/viewAddPlan', query: { title: item } })
            }
        }
    }
}
</script>
<style scoped>
.banner {
    position: absolute;
    width: 100%;
    height: 215px;
    z-index: 1;
    content: '' !important;
}
.navs {
    position: relative;
    padding-top: 163px;
    z-index: 1;
}
.navs li {
    width: 317px;
    height: 117px;
    margin: 0 auto;
    margin-bottom: 10px;
    padding-left: 50px;
}
.navs li,
.navs li a {
    display: block;
    color: #666;
    line-height: 110px;
    font-size: 16px;
    font-weight: 600;
}
.navs li:nth-child(1) {
    background: url('../assets/list-bg1.png') no-repeat center;
    background-size: contain;
}
.navs li:nth-child(2) {
    background: url('../assets/list-bg2.png') no-repeat center;
    background-size: contain;
}
.navs li:nth-child(3) {
    background: url('../assets/list-bg3.png') no-repeat center;
    background-size: contain;
}
.btn-nav {
    background: #fff;
}
.root-index {
    padding-bottom: 50px;
}
</style>
<style>
.root-index .weui-actionsheet {
    top: 30%;
    background-color: rgba(0, 0, 0, 0);
}
.root-index .weui-actionsheet__menu {
    margin: 0 auto;
    width: 80%;
    overflow-y: auto;
    line-height: 20px;
    border-radius: 10px;
}
.root-index .vux-actionsheet-menu-default {
    padding: 20px 20px !important;
    text-align: left;
    font-size: 16px;
}
</style>
